<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
     <!-- 引入Vue 全局注册一个名为Vue的构造函数 -->
 <script src="./js/vue.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Vue组件</title>
   
</head>

<!-- 1.组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2.<school/>Vue解析时会帮我们创建school组件的实例对象，Vue帮我们执行:new VueComponent(options) 
  3.注意: 每次调用Vue.extend,返回的都是一个全新的VueComponent ! ! !

4.关于this的指向
(1).组件配置中  this的指向均为VueComponent对象(简称vc)
(2).new Vue 配置中 this的指向均是Vue实例对象(简称vm)
-->

<body>
    <div id="app">
       <!-- <ul>
        <my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
       </ul> -->

      <school></school>
      <student></student>
      <hello></hello>
    </div>

    <script>

        //组件命名规则 单个英文名:全小写，首字母大写。多个英文名：字母中间用-链接，或者全部首字母大写。my-school MySchool-脚手架环境中编写
        //可以使用name配置项定义组件在开发者工具中的名字
        //定义组件
    //    Vue.component("my-component-li",{
    //     props:["item"],
    //     template:'<li> {{item}} </li>'
    //    })

    //创建组件
       const school=Vue.extend({
        template:`
        <div>
        <h2>{{schoolName}}</h2>
        <h2>{{address}}</h2>
        <div>
        `,
         data(){
            return{
                schoolName:'尚硅谷',
                address:'北京昌平'
            }
         }
       })

       const student=Vue.extend({
        template:`
        <div>
        <h2>{{studentName}}</h2>
        <h2>{{age}}</h2>
        <div>
        `,
        data(){
            return{
                studentName:'李彤康',
                age:'22'

            }
        }
       })

       const hello=Vue.extend({
        template:`
        <div>
            <h2>你好{{name}}</h2>
            </div>
        `,
        data(){
            return{
                name:"李小妹"
            }
        }
       })
       
       //注册全局组件
       Vue.component('hello',hello);

        var app=new Vue({
            el:"#app",
            data:{
              items:[
                "古力娜扎","李彤康","冯雅琪"
              ]
            },
            //组件注册
            components:{
                school,
                student
            }
        })
    </script>
</body>
</html>